<template>
  <div class="stage-app">
    <div class="my-phone">
      <div class="phone-contain">
        <!-- <video class="stage-play" width="300px" height="650px" autoplay ref='video'>
          <source src="../../assets/HomeResource/video/distribute-toutiao-v2.mp4" type="video/mp4" />
        </video> -->
        <img src="../../assets/HomeResource/news_resource/fengmian.jpg" alt="" style="height:620px;width:300px" ref="img">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Phone",
  props: ["stage"],
  data() {
    return {
    };
  },
  methods: {
    change() {
        this.$refs.img.src = this.videoSrc;
    }
  },
  computed: {
    videoSrc: function() {
      let tempValue;
        switch (this.stage) {
            case 'news01': tempValue = require("../../assets/HomeResource/news_resource/jiaoyujijin.jpg"); break;
            case 'news02': tempValue = require("../../assets/HomeResource/news_resource/002.jpg"); break;
            case 'news03': tempValue = require("../../assets/HomeResource/news_resource/003.jpg"); break;
            case 'news04': tempValue = require("../../assets/HomeResource/news_resource/jiaoyujijin.jpg");
        }
        return tempValue;
    }
  },
};
</script>

<style lang="scss" scoped>
.stage-app {
  position: relative;
  width: 350px;
  height: 700px;
  .my-phone {
    width: 596px;
    height: 945px;
    background: url("../../assets/HomeResource/images/distribute-bg.png") no-repeat;
    background-size: contain;
    background-position: 33px -31px;
    overflow: hidden;
    .phone-contain {
        width: 300px;
        height: 620px;
        // margin: 9px 0px 0px 0px;
        background-color: burlywood;
        border-radius: 30px;
        margin-left: 140px;
        margin-top: 77px;
        overflow: hidden;
        .img-animation {

        }
    }
  }
}
</style>
